<!DOCTYPE HTML>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<meta charset="utf-8">
<head th:include="include :: header"></head>
<body class="gray-bg">
    <div class="container-div">
    
    	<div class="col-sm-12 search-collapse">
				<form id="role-form">
					<div class="select-list">
						<ul>
							<li class="select-time">
								<label>筛选日期： </label>
								<input type="text" class="time-input" id="stepTime" placeholder="筛选日期" name="params[stepTime]"/>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="$.table.search()"><i class="fa fa-search"></i>&nbsp;搜索</a>
							    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>
    
		<div class="col-sm-12 select-table table-striped">
			<table id="bootstrap-table" data-mobile-responsive="true"></table>
		</div>
		
		<div class="col-sm-12" style="background: #fff;border-radius: 6px;margin-top: 10px;">
			<div id="container" style="height: 300px;width: 50%;float:left;"></div>
			<div id="container1" style="height: 300px;width: 50%;float:right;"></div>
		</div>
    </div>
    <div th:include="include :: footer"></div>
    <script th:inline="javascript">
        var prefix = ctx + "data";
        
        layui.use('laydate', function() {
        	var laydate = layui.laydate;
        	laydate.render({
          	  elem: '#stepTime' //指定元素
          });
        });
        
        var dom = document.getElementById("container");
        var myChart = echarts.init(dom);
        var app = {};
        option = null;
        option = {
            xAxis: {
                type: 'category',
                data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun']
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: [120, 200, 150, 80, 70, 110, 130],
                type: 'bar'
            }]
        };
        ;
        if (option && typeof option === "object") {
            myChart.setOption(option, true);
        }
        
        var dom1 = document.getElementById("container1");
        var myChart1 = echarts.init(dom1);
        var app1 = {};
        option1 = null;
        app1.title = '环形图';

        option1 = {
            tooltip: {
                trigger: 'item',
                formatter: "{a} <br/>{b}: {c} ({d}%)"
            },
            legend: {
                orient: 'vertical',
                x: 'left',
                data:['直接访问','邮件营销','联盟广告','视频广告','搜索引擎']
            },
            series: [
                {
                    name:'访问来源',
                    type:'pie',
                    radius: ['50%', '70%'],
                    avoidLabelOverlap: false,
                    label: {
                        normal: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            show: true,
                            textStyle: {
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            show: false
                        }
                    },
                    data:[
                        {value:335, name:'直接访问'},
                        {value:310, name:'邮件营销'},
                        {value:234, name:'联盟广告'},
                        {value:135, name:'视频广告'},
                        {value:1548, name:'搜索引擎'}
                    ]
                }
            ]
        };
        ;
        if (option1 && typeof option1 === "object") {
            myChart1.setOption(option1, true);
        }
        

        $(function() {
            var options = {
                url: prefix + "/list",
                modalName: "house",
                search: false,
                columns: [{
		            checkbox: true
		        },
				{
					field : 'id', 
					title : '分段名' 
				},
				{
					field : 'code', 
					title : '人次' 
				},
				{
					field : 'name', 
					title : '所占比例' 
				},
				/* {
					field : 'source', 
					title : '设备来源' 
				},
				{
					field : 'userId', 
					title : '关联用户' 
				},
				{
					field : 'createBy', 
					title : '创建者' 
				},
				{
					field : 'createTime', 
					title : '创建时间' 
				},
				{
					field : 'updateBy', 
					title : '更新者' 
				},
				{
					field : 'updateTime', 
					title : '更新时间' 
				}, */
		        {
		            title: '操作',
		            align: 'center',
		            formatter: function(value, row, index) {
		            	var actions = [];
						return actions.join('');
		            }
		        }]
            };
            $.table.init(options);
        });
    </script>
</body>
</html>